<template lang="pug">
  div
    section.home-part
      el-row.dataWrapper(:gutter="24")
        el-col(:span="12")
          div(class="group")
            h2 本月数据概况
            .content
              .databox
                p 总收入
                div
                  div
                    h3 {{month.total | toThousandFilter}}
                    span （元）
                  img(src="@/assets/zsr.png")
              .databox
                p 总收费
                div
                  div
                    h3 {{month.fullRecharge | toThousandFilter}}
                    span （元）
                  img(src="@/assets/zsf.png")
              .databox
                p 总退费
                div
                  div
                    h3 {{month.returnAmount | toThousandFilter}}
                    span （元）
                  img(src="@/assets/ztf.png")
        el-col(:span="12")
          div(class="group")
            h2 本年数据概况
            .content
              .databox
                p 总收入
                div
                  div
                    h3 {{year.total | toThousandFilter}}
                    span （元）
                  img(src="@/assets/zsr.png")
              .databox
                p 总收费
                div
                  div
                    h3 {{year.fullRecharge | toThousandFilter}}
                    span （元）
                  img(src="@/assets/zsf.png")
              .databox
                p 总退费
                div
                  div
                    h3 {{year.returnAmount | toThousandFilter}}
                    span （元）
                  img(src="@/assets/ztf.png")
</template>
<script>
import { finSatisticsByYear, finSatisticsByMonth } from '@/api/dashboard'
export default {
  data () {
    return {
      year: {
        total: 0,
        fullRecharge: 0,
        returnAmount: 0
      },
      month: {
        total: 0,
        fullRecharge: 0,
        returnAmount: 0
      }
    }
  },
  created () {
    this.getYearData()
    this.getMonthData()
  },
  methods: {
    getYearData () {
      finSatisticsByYear().then(res => {
        console.log(res)
        this.year = res
      })
    },

    getMonthData () {
      finSatisticsByMonth().then(res => {
        console.log(res)
        this.month = res
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.home-part{
  background-color:transparent !important;
  ::v-deep{
    .el-col{
      padding: 0 !important;
    }
    .el-row{
      margin: 0 !important;
    }
    .el-col:nth-child(1){
      padding-right: 24px !important;
    }
  }
}
.dataWrapper {
  margin-top: 24px;

  .databox:nth-child(1){
    background: linear-gradient( 46deg, #FCFBFE 0%, #FEFFF1 100%);
  }
  .databox:nth-child(2){
    background: linear-gradient( 46deg, #FCFBFE 0%, #FFF5F5 100%);
   }
  .databox:nth-child(3){
    background: linear-gradient( 46deg, #FCFBFE 0%, #F1FEFF 100%);
  }
  .databox{
    border-radius: 8px;
    padding: 24px;
    flex: 1;
    margin-right: 16px;
    > p {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 400;
      font-size: 16px;
      color: #77778C;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
    div{
      display: flex;
      justify-content: space-between;
      div{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
      }
      img{
        width: 64px;
        height: 64px;
      }
    }
    h3 {
      margin: 0 !important;
      padding: 0 !important;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 800;
      font-size: 24px;
      color: #000000;
      text-align: center;
      font-style: normal;
      text-transform: none;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
}
.tp{
  margin-top: 40px;
}

.group{
  padding: 24px;
  background-color:#fff;
  display: flex;
  flex-direction: column;

  > h2{
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 18px;
    color: #000000;
    text-align: left;
    font-style: normal;
    text-transform: none;
    margin: 0;

    .more{
      font-size: 15px;
      font-family: PingFang SC;
    ;
      color: #6E645A;

      span.icon {
        display: inline-block;
        width: 16px;
        height: 16px;
        line-height: 12px;
        border-radius: 8px;
        text-align: center;
        vertical-align: middle;
        border: 1px solid #6E645A;
        transform: scale(0.8);

        i {
          color: #6E645A;
          font-size: 12px;
          font-weight: bold;
        }
      }

    }
  }

  .content{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 30px;
  }
}
</style>
